<template>
  <div class="sidebar-btn-group">
    <el-tooltip
      v-for="(item, index) of sidebar"
      :key="index"
      :class="['sidebar-btn', {active: curIdx === index}]"
      effect="dark"
      :content="item.text"
      placement="left"
      popper-class="sidebar-poper"
    >
      <div @click="sideBtnClick(item.text, index)">
        <img v-if="index === 0" :src="require(`@/assets/img/dispath/4-2meiceng${curIdx === index ? '_active' : ''}.svg`)" alt="">
        <img v-if="index === 1" :src="require(`@/assets/img/dispath/5-2meiceng${curIdx === index ? '_active' : ''}.svg`)" alt="" style=" -moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);">
        <img v-if="index === 2" :src="require(`@/assets/img/dispath/fukan_shijiao${curIdx === index ? '_active' : ''}.svg`)" alt="">
        <img v-if="index === 3" :src="require(`@/assets/img/dispath/limian_shijiao${curIdx === index ? '_active' : ''}.svg`)" alt="">
      </div>
    </el-tooltip>
  </div>
</template>

<script>

const sidebar = [
  { text: '4上煤层', sceneName: 'TYDD_4SMC' },
  { text: '4煤层', sceneName: 'TYDD_4MC' },
  { text: '俯瞰视角', sceneName: 'TYDD_FKSJ' },
  { text: '立面视角', sceneName: 'TYDD_LMSJ' }
];

export default {
  name: 'SideBar',
  data() {
    return {
      sidebar,
      curIdx: 0
    };
  },
  methods: {
    sideBtnClick(name, index) {
      if (this.curIdx === index) {
        this.curIdx = null;
      } else {
        this.curIdx = index;
      }

      const sceneName = sidebar.find(item => name === item.text).sceneName;

      this.$store.dispatch('postToEngine', { sceneName });
    }
  }
};
</script>

<style lang="scss" scoped>
  .sidebar-btn-group {
    position: absolute;
    top: 0;
    left: -4.375rem;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    width: 3.125rem;
    height: 14.375rem;
    .sidebar-btn {
      cursor: pointer;
      div { cursor: pointer; }
      padding: 0.75rem;
      width: 3.125rem;
      height: 3.125rem;
      color: red;
      text-align: center;
      border-radius: .25rem;
      background-color: rgba($color: #000000, $alpha: 0.5);
      box-sizing: border-box;

      &.active {
        background-color: $tagBgActive;
      }
    }
  }
</style>
